<template>
  <roll-in-layout :current="4">
    <mt-button slot="right" @click="handleAdd">{{addForm ? '收起' : '添加'}}</mt-button>
    <transition name="fade" mode="out-in">
      <div class="list" v-if="!addForm" key="list">
        <loading-text v-if="loading"></loading-text>
        <empty v-if="!loading && !list.length"></empty>
        <div class="item" v-for="(val, key) in list" :key="key">
          <transition name="fade" mode="out-in">
            <div class="content" v-if="!toggle[key]" key="content">
              <div class="left">
                <span>{{val.aae030}} - {{val.aac046}}</span>
                <span>{{val.aac045}}</span>
              </div>
              <div class="edit" @click="handleEdit(key, val.aac0d0)">
                <i class="xffont xf-more1"></i>
              </div>
            </div>
            <form-edu v-if="toggle[key]" @cancel="toggleShow(key)" @save="update(key)" key="form" :detail="list[key]"></form-edu>
          </transition>
        </div>
      </div>
      <form-edu v-if="addForm" @cancel="handleAdd" @save="handleAddSubmit" key="addForm"></form-edu>
    </transition>
    <mt-actionsheet
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
    <div class="next" slot="footer">
      <mt-button size="large" type="primary" @click="onSubmit">下一步</mt-button>
    </div>
  </roll-in-layout>
</template>
<script>
  import RollInLayout from './layout.vue'
  import FormEdu from '../../record/apply/form-edu.vue'
  import Empty from '../../../components/empty/empty'
  import LoadingText from '../../../components/loading-text/loading-text'

  export default {
    components: {
      LoadingText,
      Empty,
      FormEdu,
      RollInLayout},
    data() {
      return {
        addForm: false,
        toggle: [],
        codeEdit: [],
        sheetVisible: false,
        delCode: '',
        delNum: '',
        actions: [{
          name: '编辑',
          method: () => {
            this.toggleShow(this.delNum, this.delCode)
          }
        }, {
          name: '删除',
          method: () => {
            this.$message.confirm('确定删除？').then(() => { this.del() })
          }
        }],
        list: [],
        loading: true,
        canLeave: false
      }
    },
    methods: {
      update(key) {
        this.toggleShow(key)
        this.getList()
      },
      toggleShow(num, code) {
        this.setCode(num, code)
        this.toggle[num] = !this.toggle[num]
        this.toggle = Array.prototype.slice.call(this.toggle)
      },
      setCode(num, code) {
        this.codeEdit[num] = code || ''
        this.codeEdit = Array.prototype.slice.call(this.codeEdit)
      },
      handleEdit(num, delCode) {
        this.delCode = delCode
        this.delNum = num
        this.sheetVisible = true
      },
      handleAdd() {
        this.addForm = !this.addForm
      },
      handleAddSubmit() {
        this.addForm = !this.addForm
        this.getList()
      },
      onSubmit() {
        this.canLeave = true
        this.$router.replace({
          name: 'rollIn5',
          query: this.$route.query
        })
      },
      getList() {
        this.$post('/admin/person/sapi/party/education/background/get/List', {
          personId: this.$route.query.id
        }, loading => { this.loading = loading }).then(res => {
          this.list = res.data.personEducation
        })
      },
      del() {
        this.$post('/admin/person/sapi/party/education/background/delete', {
          aac0d0: this.delCode,
          personId: this.$route.query.id
        }, loading => { this.$message.loading(loading) }).then(res => {
          this.$message.toast(res.message)
          this.getList()
        })
      }
    },
    created() {
      this.getList()
    },
    beforeRouteLeave(to, fro, next) {
      if (this.canLeave) {
        next(true)
      } else {
        this.$message.confirm('您的业务办理尚未完成，确定离开？').then(() => {
          next(true)
        }).catch(() => {
          next(false)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";
  .list{
    .content{
      margin: .15rem 0 0 0;
      padding: .2rem;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        span{
          &:first-child{
            font-size: .28rem;
          }
          &:not(:first-child){
            font-size: .3rem;
            color: #666;
            margin: .1rem 0 0 0;
          }
        }
      }
      .edit{
        padding: .2rem;
        .xffont{
          font-size: .5rem;
        }
      }
    }
  }
</style>
